<!-- 销售信息 -->
<template>
  <div class="main-app"
       v-loading="loading"
       element-loading-text="页面数据加载中..."
       element-loading-svg-view-box="-10, -10, 50, 50"
       element-loading-background="rgba(122, 122, 122, 0.8)">
    <!--  头部  -->
    <div class="main-app-header">
      <span class="title">中山市嘉晖金属制品有限公司</span>
      <!--   logo   -->
      <img class="header-logo" src="@/assets/icons/logo.png">
      <!--  时间组件   -->
      <div class="header-data">
        <el-config-provider :locale="locale">
          <el-date-picker
              v-model="dateRef"
              type="month"
              placeholder="请选择"
              value-format="YYYY-MM"
              @change="handleInput"
              :clearable="false"
          />
        </el-config-provider>
      </div>
    </div>
    <!--  中间展示区域  -->
    <div class="main-app-ctn">
      <div class="left-side-ctn">
        <div class="ctn-box left-base-item">
          <div class="ctn-box-title"></div>
          <div class="ctn-box-base l-b-top">
            <div class="l-b-top-item">
              <img src="@/assets/icons/sales/icon-1.png">
              <div class="l-b-top-item-right">
                <div class="t-item">
                  <span>本月下单金额</span>
                  <label class="la">￥{{caleData(salesTimeData?.monthData?.orderAmount)}}</label>
                </div>
                <div class="t-item">
                  <span>本年累计下单金额</span>
                  <label>￥{{caleData(salesTimeData?.yearData?.annualOrderAmount)}}</label>
                </div>
              </div>
            </div>
            <div class="l-b-top-item">
              <img src="@/assets/icons/sales/icon-2.png">
              <div class="l-b-top-item-right">
                <div class="t-item">
                  <span>本月出货金额</span>
                  <label class="la">￥{{caleData(salesTimeData?.monthData?.shippingAmount)}}</label>
                </div>
                <div class="t-item">
                  <span>本年累计出货金额</span>
                  <label>￥{{caleData(salesTimeData?.yearData?.annualShippingAmount)}}</label>
                </div>
              </div>
            </div>
            <div class="l-b-top-item">
              <img src="@/assets/icons/sales/icon-3.png">
              <div class="l-b-top-item-right">
                <div class="t-item">
                  <span>本月预计出柜数</span>
                  <label class="la">{{salesTimeData?.monthData?.estimatedContainers}}</label>
                </div>
                <div class="t-item">
                  <span>本年累计预计出柜数</span>
                  <label>{{salesTimeData?.yearData?.annualEstimatedContainers}}</label>
                </div>
              </div>
            </div>
            <div class="l-b-top-item">
              <img src="@/assets/icons/sales/icon-4.png">
              <div class="l-b-top-item-right">
                <div class="t-item">
                  <span>本月已出柜数</span>
                  <label class="la">{{salesTimeData?.monthData?.shippedContainers}}</label>
                </div>
                <div class="t-item">
                  <span>本年累计已出柜数</span>
                  <label>{{salesTimeData?.yearData?.annualShippedContainers}}</label>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="ctn-box left-base-item">
          <div class="ctn-box-title">
            <span>客户销售额对比</span>
            <div class="title-tab">
              <span :class="{'active': !tagActiveSale}" @click.stop="tagActiveSale = !tagActiveSale;getDataS()">月</span>
              <span :class="{'active': tagActiveSale}" @click.stop="tagActiveSale = !tagActiveSale;getDataS()">年</span>
            </div>
          </div>
          <div class="ctn-box-base">
            <basic-echarts-pie
                :chartData="chartDataBox"
                :graphic="graphic"
            ></basic-echarts-pie>
          </div>
        </div>
      </div>
      <div class="ctn-box right-side-ctn">
        <div class="ctn-box-title">
          <span>产品数据分析</span>
          <div class="title-tab">
            <span :class="{'active': !tagActive}" @click.stop="tagActive = !tagActive;getDataP()">月</span>
            <span :class="{'active': tagActive}" @click.stop="tagActive = !tagActive;getDataP()">年</span>
          </div>
        </div>
        <div class="ctn-box-base">
          <div class="right-top-box">
            <div class="box">
              <img src="@/assets/icons/sales/icon-5.png"/>
              <div class="box-details">
                <div class="box-details-row bdr-1">
                  <span class="sp1"><em>用铁量</em><i>{{ caleData(baseInfoYTie?.ironUsage) ?? '--' }}</i><b>吨</b></span>
                  <span class="sp1" v-if="!tagActive"><em>较上月</em><i
                      class="i-up">{{ baseInfoYTie?.ironChangePercentage?.toFixed(2) ?? '--' }}%</i></span>
                </div>
                <div class="box-details-row">
                  <span class="sp2">笼子总数量:<i>{{baseInfoYTie?.cageCount ?? '--'}}</i></span>
                  <span class="sp2">围栏总数量:<i>{{baseInfoYTie?.fenceCount ?? '--'}}</i></span>
                </div>
              </div>
            </div>
            <div class="box">
              <img src="@/assets/icons/sales/icon-5.png"/>
              <div class="box-details">
                <div class="box-details-row bdr-1">
                  <span class="sp1"><em>用M09量</em><i>{{ caleData(baseInfoYTie?.m09Usage) ?? '--' }}</i><b>吨</b></span>
                  <span class="sp1" v-if="!tagActive"><em>较上月</em><i
                      class="i-up">{{ baseInfoYTie?.m09ChangePercentage?.toFixed(2) ?? '--' }}%</i></span>
                </div>
                <div class="box-details-row">
                  <span class="sp2">笼子总数量:<i>{{baseInfoYTie?.cageCount ?? '--'}}</i></span>
                  <span class="sp2">围栏总数量:<i>{{baseInfoYTie?.fenceCount ?? '--'}}</i></span>
                </div>
              </div>
            </div>
          </div>
          <div class="tag">
            <img src="@/assets/icons/sales/tag.png">
            <span>产品分类</span>
          </div>
          <div class="right-bottom-box">
            <div class="right-bottom-box-item" v-for="(s,key) in baseInfo">
              <div class="b-title">{{ key }}</div>
              <div class="b-ctn-box">
                <div class="b-ctn-box--item" v-for="(subS,subKey) in s">
                  <span>{{ subKey }}</span>
                  <label>{{ subS }}</label>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

</template>

<script lang="ts" setup>
import locale from 'element-plus/es/locale/lang/zh-cn';
import {ref} from "vue";
import formatDate,{caleData} from "@/utils/baseCfg";
import BasicEchartsPie from "@/components/basicEchartsPie.vue";
import {getCustomerSalesComparisonApi, getProductTypeApi, getRealTimeDataApi, getYTieAndMApi} from "@/api/modules/base";
import {IBase} from "@/api/interface/base";

defineOptions({
  name: 'salesView'
})
// 加载进度
const loading = ref<boolean>(true)
// 右上角时间下拉框
const dateRef = ref(formatDate(new Date()))
// true： 年 false：月
let tagActive = ref<boolean>(false)
let tagActiveSale = ref<boolean>(false)
// 下拉日期选中时事件
const handleInput = () => {
  if (dateRef.value.trim() === '') return
  tagActive.value = tagActiveSale.value = false
  getData()
}
// 销售额
let chartDataBox: any = ref([]);
const graphic = ref({
  top: 10,
  left: 18,
  width: 320,
  height: 320
})
// 产品分类
let baseInfo: any = {} = ref({})
// 产品数据分析
let baseInfoYTie: any = {} = ref({})
// 销售实时数据
let salesTimeData: any = {} = ref({})
// 后台获取数据
const getData = async () => {
  chartDataBox.value = []
  const params = reactive<IBase.Params>({
    month: parseInt(dateRef.value.split('-')[1]),
    year: dateRef.value.split('-')[0]
  })
  // 当前状态为年 的分类
  if (tagActive.value) {
    delete params.month
  }
  // 产品分类
  const {data} = await getProductTypeApi(params)
  // 产品用铁和用M09量
  const {data: yTie} = await getYTieAndMApi(params)
  // 销售实时数据
  const {data: salesTimeDataRes} = await getRealTimeDataApi(params)
  baseInfo.value = data
  baseInfoYTie.value = yTie
  salesTimeData.value = salesTimeDataRes
  // 客户销售
  const {data: salesDataRes} = await getCustomerSalesComparisonApi(params)
  if (Object.keys(salesDataRes).length > 0) {
    Object.keys(salesDataRes).forEach(key => {
      chartDataBox.value.push({
        value: salesDataRes[key]?.totalDeclarationAmount,
        name: key
      })
    })
  }

  loading.value = false
}
const getDataS = async () => {
  chartDataBox.value = []
  const params = reactive<IBase.Params>({
    month: parseInt(dateRef.value.split('-')[1]),
    year: dateRef.value.split('-')[0]
  })
  // 当前状态为年 的分类
  if (tagActiveSale.value) {
    delete params.month
  }
  // 客户销售
  const {data: salesDataRes} = await getCustomerSalesComparisonApi(params)
  if (Object.keys(salesDataRes).length > 0) {
    Object.keys(salesDataRes).forEach(key => {
      chartDataBox.value.push({
        value: salesDataRes[key]?.totalDeclarationAmount,
        name: key
      })
    })
  }
}
const getDataP = async () => {
  const params = reactive<IBase.Params>({
    month: parseInt(dateRef.value.split('-')[1]),
    year: dateRef.value.split('-')[0]
  })
  // 当前状态为年 的分类
  if (tagActive.value) {
    delete params.month
  }
  // 产品分类
  const {data} = await getProductTypeApi(params)
  // 产品用铁和用M09量
  const {data: yTie} = await getYTieAndMApi(params)
  baseInfo.value = data
  baseInfoYTie.value = yTie
}
onMounted(() => {
  getData()
})
</script>

<style lang="scss" scoped>
.main-app-ctn {
  display: flex;
  justify-content: space-between;

  .ctn-box .title-tab {
    span {
      width: 102px;
    }
  }

  .left-side-ctn {
    width: 678px;
    margin-right: 18px;
    display: flex;
    flex-direction: column;
    gap: 18px;

    .left-base-item {
      width: 100%;
      height: calc((100% - 18px) / 2);
      background: url("@/assets/icons/sales/bg-2.png") center/100% 100% no-repeat;

      .l-b-top {
        display: flex;
        flex-direction: column;
        gap: 12px;
        padding: 10px 14px;

        .l-b-top-item {
          height: 25%;
          background: url("@/assets/icons/sales/cyn-bg.png") center/100% 100% no-repeat;
          display: flex;
          align-items: center;

          .t-item {
            display: flex;
            align-items: center;
            height: 40px;
            line-height: 60px;
          }

          .l-b-top-item-right{
            flex: 1;
            display: flex;
            justify-content: space-between;
            padding-right: 10px;
          }

          img {
            width: 100px;
          }

          span {
            font-size: 18px;
            margin-right: 5px;
          }

          label {
            display: inline-block;
            height: 100%;
            font-weight: bold;
            font-size: 26px;
            font-family: din-bold;
            color: rgba(255, 185, 62, 1);
          }
        }
      }
    }
  }

  .right-side-ctn {
    flex: 1;
    background: url("@/assets/icons/sales/bg-1.png") center/100% 100% no-repeat;

    .ctn-box-base {
      padding: 5px 19px;

      .right-top-box {
        height: 100px;
        display: flex;
        gap: 21px;

        .box {
          flex: 1;
          display: flex;
          align-items: center;
          background: url("@/assets/icons/sales/ctn-bg.png") center/100% 100% no-repeat;
        }

        img {
          width: 80px;
          height: 76px;
        }

        .box-details {
          width: calc(100% - 80px);
        }
      }

      .tag {
        height: 68px;
        font-weight: bold;
        font-size: 22px;
        color: #DBE8FF;
        display: flex;
        align-items: center;

        img {
          width: 20px;
          height: 21px;
        }
      }

      .right-bottom-box {
        width: 100%;
        height: calc(100% - 188px);
        display: flex;
        gap: 15px;

        .right-bottom-box-item {
          flex: 0 33.33%;
          height: 100%;
          background: url("@/assets/icons/sales/bg-3.png") center/100% 100% no-repeat;
          padding-top: 16px;

          .b-title {
            width: 100%;
            height: 32px;
            text-align: center;
            font-size: 18px;
            background: url("@/assets/icons/sales/title-bg.png") center/153px 32px no-repeat;
          }

          .b-ctn-box {
            width: 100%;
            height: calc(100% - 62px);
            display: flex;
            flex-wrap: wrap;
            align-content: flex-start;
            gap: 7px;
            overflow: auto;
            margin: 19px 8px;

            .b-ctn-box--item {
              width: 109px;
              height: 142px;
              background: url("@/assets/icons/sales/icon-7.png") center/100% 100% no-repeat;
              display: flex;
              flex-direction: column;
              align-items: center;
              justify-content: center;
              padding: 65px 13px 0;

              span {
                font-size: 12px;
              }

              label {
                font-size: 15px;
                color: rgba(255, 190, 65, 1);
                font-family: din-bold;
                margin-top: 15px;
              }
            }
          }
        }
      }
    }
  }
}
</style>
